<template>
    <div>
       
        <div id="secondMap" ref="secondMap" style="width: 500px; height:330px;margin:0 auto"></div>
    </div>
    
</template>

<script>
import echarts from 'echarts'
export default {
    props: {
        secondList:{
            type:Array
        },
       
        changeSelected: {
            type: String
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    watch: {
        secondList: {
            deep: true,
            handler(val) {
                this.setOptions(val);
            }
        }
    },
    methods:{
        initChart() {
            this.chart = echarts.init(document.getElementById('secondMap'), null, { renderer: 'svg' });
            this.setOptions(this.secondList);
        },
        setOptions(newArr){
            let DW1
            let DW2
            // console.log(newArr,'123456');
            // 遍历得出月份
            let bottomArr =newArr.map(item=>{
                return item.month
            })
            let monthList = Array.from(new Set(bottomArr))
           
          
            // 获取报关单量
            DW1=newArr[0].countTotal.slice(-1)
            DW2=newArr[0].sumTotal.slice(-1)
            
            let entNumberList =newArr.map(item=>{
                return +item.countTotal.slice(0,-1)
            })
             
          
            // 获取贸易额
    
            let TradeVolumeList=newArr.map(item=>{
                if (!item.sumTotal) {
                    return 0
                }else {
                    return +item.sumTotal.slice(0,-1)
                }
               
            })
        
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: newArr.length > 0 ,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },
                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
                    borderColor: 'rgba(75, 253, 238, 0.4)',
                    textStyle: {
                        color: '#CFE3FC',
                    },
                },
                legend: [

                    {
                        show: newArr.length > 0,
                        data: ['贸易额'],
                        top: 10,
                        right: 150,
                        itemWidth: 8,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        icon: 'circle'
                    },
                    {
                        show: newArr.length > 0,
                        data: ['报关单量'],
                        top: 10,
                        right: 220,

                        itemStyle: {
                            borderWidth: 2
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        itemWidth: 15,
                        itemHeight: 8,
                    }
                ],
                grid: {
                    left: '10px',
                    right: '0px',
                    top: '70px',
                    bottom: '40px',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center'
                },
                xAxis:  {
                        type: 'category',
                        boundaryGap: true,
                        axisTick: {
                            show: false
                        },
                        data: monthList,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.2)'
                            }
                        },
                        axisLabel: {
                          
                            color: '#fff',
                          
                           
                        },
        
                    

                    },
                yAxis: [
                    {
                        type: 'value',
                       
                        axisTick: {
                            show: false
                        },

                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(207, 227, 252, 1)'
                            },
                            symbol: ['none', 'arrow'],
                            symbolSize: [5, 12],
                            symbolOffset: [0, 10]
                        },
                        min: 0,
                        
                        axisLabel: {
                            interval: 0,
                            color: '#fff',
                            fontSize: 12,
                            formatter: '{value}'+DW2
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(39, 57, 75, 1)',
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    {
                        type: 'value',
                        
                        axisTick: {
                            show: false
                        },

                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(207, 227, 252, 1)'
                            },
                            symbol: ['none', 'arrow'],
                            symbolSize: [5, 12],
                            symbolOffset: [0, 10]
                        },
                        min: 0,
                        
                        axisLabel: {
                            interval: 0,
                            color: '#fff',
                            fontSize: 12,
                            formatter: '{value}' +DW1
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(39, 57, 75, 1)',
                                width: 1,
                                type: 'solid'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '报关单量',
                        yAxisIndex: 1,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(4, 255, 122,.8)'
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(2, 255, 124,0)'
                                }
                            ])
                        },
                        data: entNumberList,
                        symbol: 'circle',
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color: 'rgba(2, 255, 124)',
                                borderColor: 'rgba(2, 255, 124,.8)',
                                lineStyle: {
                                    color: 'rgba(2, 255, 124)'
                                }
                            }
                        },

                    },

                    {
                        z: 1,
                        type: 'bar',
                        barGap: '-100%',
                        yAxisIndex: 0,
                        name: '贸易额',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                    offset: 0,
                                    // color: 'rgb(57,89,255,1)'
                                    color: 'rgb(46,200,207,1)'
                                }, {
                                    offset: 1,
                                    // color: 'rgb(46,200,207,1)'
                                    color: 'rgb(33, 113, 243,1)'
                                }]),
                            },
                        },
                        barWidth: '30%',
                        data: TradeVolumeList
                    }
                ]
            })
        }
    }
}
</script>

<style>

</style>